﻿@model HouseIndexViewModel
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>@ViewBag.Title</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="~/js/rem.js"></script>
    <script src="~/js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="~/css/base.css" />
    <link rel="stylesheet" type="text/css" href="~/css/page.css" />
    <link rel="stylesheet" type="text/css" href="~/css/all.css" />
    <link rel="stylesheet" type="text/css" href="~/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="~/css/loaders.min.css" />
    <link rel="stylesheet" type="text/css" href="~/css/loading.css" />
    <link rel="stylesheet" type="text/css" href="~/slick/slick.css" />
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
    <link rel="stylesheet" type="text/css" href="~/css/mui.picker.min.css" />

    <div class="headertwo clearfloat" id="header">
        <a href="javascript:history.go(-1)" class="fl box-s"><i class="iconfont icon-arrow-l fl"></i></a>
        <p class="fl">房源详情</p>
        <a href="#" class="fr" onClick="toshare()"><i class="iconfont icon-fenxiang fl"></i></a>
    </div>

    <!--分享内容-->
    <div class="am-share">
        <h3 class="am-share-title">分享到</h3>
        <ul class="am-share-sns">
            <li><a href="#"> <i class="iconfont icon-weixin weixin"></i> <span>微信</span> </a> </li>
            <li><a href="#"> <i class="iconfont icon-qq qq"></i> <span>QQ</span> </a> </li>
            <li><a href="#"> <i class="iconfont icon-weibo weibo"></i> <span>微博</span> </a> </li>
            <li><a href="#"> <i class="iconfont icon-renrenwang renren"></i> <span>人人</span> </a> </li>
        </ul>
        <div class="am-share-footer"><button class="share_btn">取消</button></div>
    </div>

    <div class="clearfloat" id="main">
        <div class="service clearfloat">
            <div class="slider one-time">
                @foreach (var pic in Model.Pics)
                {
                    <div>
                        <img src="@pic.Url" />
                        <div class="tit clearfloat box-s">
                            <p class="one">@Model.House.CommunityName</p>
                            <p class="two">@Model.House.CommunityLocation</p>
                        </div>
                    </div>
                }
            </div>
        </div>

        <div class="service-top clearfloat box-s">
            <div class="left fl clearfloat box-s">
                <p class="tit titwo">@Model.House.MonthRent<span>元/月</span></p>
                <p class="fu-tit">
                    @Model.House.RoomTypeName   |  @(Model.House.Area)m²
                    |  @Model.House.DecorateStatusName | @Model.House.TypeName
                </p>
            </div>
            <div class="right fl clearfloat">
                <i class="iconfont icon-shoucang"></i>
                <p>收藏</p>
            </div>
        </div>

        <div class="service-ctent clearfloat">
            <div class="recom-tit clearfloat box-s">
                <p>房屋信息</p>
            </div>
            <div class="service-list clearfloat box-s">
                <ul>
                    <li>类型：@Model.House.TypeName</li>
                    <li>朝向：@Model.House.Direction</li>
                    <li>楼层：@Model.House.FloorIndex/@Model.House.TotalFloorCount </li>
                    <li>装修：@Model.House.DecorateStatusName</li>
                    <li>现状：@Model.House.StatusName</li>
                    <li>可入驻：@Model.House.CheckInDateTime</li>
                    <li>建造年代：@(Model.House.CommunityBuiltYear) 年</li>
                    <li>可看房：@(Model.House.LookableDateTime)以后</li>
                </ul>
                <p class="service-tit">交通：@(Model.House.CommunityTraffic)</p>
            </div>
        </div>

        <div class="service-ctent clearfloat">
            <div class="recom-tit clearfloat box-s">
                <p>配置设施</p>
            </div>
            <div class="service-ties clearfloat box-s">
                <ul>
                    @foreach (var att in Model.Attachments)
            {
                        <li><i class="iconfont @att.IconName"></i>@att.Name</li>
                    }
                </ul>
            </div>
        </div>

        <div class="service-ctent clearfloat">
            <div class="recom-tit clearfloat box-s">
                <p>房源描述</p>
            </div>
            <p class="tit box-s">
                @Html.Raw(Model.House.Description)
            </p>
        </div>

        <div class="service-ctent clearfloat">
            <div class="recom-tit clearfloat box-s">
                <p>相似好房</p>
            </div>
            <div class="recom-xia clearfloat box-s">
                <div class="list clearfloat fl">
                    <a href="house-details.html">
                        <div class="tu">
                            <span></span>
                            <img src="upload/1.jpg" />
                        </div>
                        <div class="bottom clearfloat">
                            <div class="top clearfloat">
                                <p class="biaoti">华府骏苑</p>
                                <p class="price">1500<span>元/月</span></p>
                            </div>
                            <p class="fu-tit">
                                三室一厅一卫   |  125m²  |  普装
                            </p>
                        </div>
                    </a>
                </div>
                <div class="list clearfloat fl">
                    <a href="house-details.html">
                        <div class="tu">
                            <span></span>
                            <img src="upload/1.jpg" />
                        </div>
                        <div class="bottom clearfloat">
                            <div class="top clearfloat">
                                <p class="biaoti">华府骏苑</p>
                                <p class="price">1500<span>元/月</span></p>
                            </div>
                            <p class="fu-tit">
                                三室一厅一卫   |  125m²  |  普装
                            </p>
                        </div>
                    </a>
                </div>
                <div class="list clearfloat fl">
                    <a href="house-details.html">
                        <div class="tu">
                            <span></span>
                            <img src="upload/1.jpg" />
                        </div>
                        <div class="bottom clearfloat">
                            <div class="top clearfloat">
                                <p class="biaoti">华府骏苑</p>
                                <p class="price">1500<span>元/月</span></p>
                            </div>
                            <p class="fu-tit">
                                三室一厅一卫   |  125m²  |  普装
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>

    </div>

    <div class="footer-look clearfloat" id="footer">
        <a href="#loginmodal" id="modaltrigger">我要看房</a>
    </div>


    <!--弹窗内容 star-->
    <div id="loginmodal" class="box-s loginmodal" style="display:none;">
        <form id="loginform" name="loginform" method="post" action="">
            <div class="center"><input type="button" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="" tabindex="3"></div>
        </form>
        <div class="top clearfloat box-s">
            填写信息
        </div>
        <div class="bottom clearfloat box-s">
            <ul>
                <li class="clearfloat">
                    <i class="iconfont icon-user"></i>
                    <input type="text" name="" id="name" value="" placeholder="您的姓名" />
                </li>
                <li class="clearfloat">
                    <i class="iconfont icon-phone"></i>
                    <input type="text" name="" id="phoneNum" value="" placeholder="您的手机号码" />
                </li>
                <li class="clearfloat">
                    <i class="iconfont icon-calendar"></i>
                    <input type="text" name="" id="visitDate" value="" placeholder="请选择看房时间" />
                </li>
            </ul>
            <input type="button" name="" id="btnMakeApp" value="立即预约" class="btn" />
        </div>
    </div>
    <!--弹窗内容 end-->

    <script type="text/javascript" src="~/js/jquery-1.8.3.min.js"></script>
    <script src="~/js/fastclick.js"></script>
    <script src="~/js/mui.min.js"></script>
    <script type="text/javascript" src="~/js/hmt.js"></script>
    <!--插件-->

    <script type="text/javascript" src="~/js/jquery.leanModal.min.js"></script>
    <script type="text/javascript" src="~/slick/slick.min.js"></script>
    <script type="text/javascript" src="~/js/mui.picker.min.js"></script>

    <script type="text/javascript">
        $('.one-time').slick({
            dots: true,
            infinite: false,
            speed: 300,
            slidesToShow: 1,
            touchMove: false,
            slidesToScroll: 1
        });
        $('#modaltrigger').leanModal({
            top: 110,
            overlay: 0.45,
            closeButton: ".hidemodal"
        });

        $(function () {
            $("#btnMakeApp").click(function () {
                var houseId = @(Model.House.Id);
                var name = $("#name").val();
                var phoneNum = $("#phoneNum").val();
                var visitDate = $("#visitDate").val();
                $.ajax({
                    url:"/House/MakeAppointment",
                    data:{houseId:houseId,name:name,phoneNum:phoneNum,visitDate:visitDate},
                    type:"post",dataType:"json",
                    success:function(res){
                        if(res.status=="ok")
                        {
                            alert("预约成功，我们将很快和您联系");
                            $("#lean_overlay").fadeOut(200);
                            $("#loginmodal").css({ "display": "none" });
                        }
                        else
                        {
                            alert(res.errorMsg);
                        }
                    },
                    error:function()
                    {
                        alert("网络请求出错");
                    }
                });
            });
        });

        $(function(){
            $("#visitDate").click(function(){
                var dtPicker = new mui.DtPicker({type:'date'});
                dtPicker.show(function (selectItems) {
                    var y = selectItems.y.text;
                    var m = selectItems.m.text;
                    var d = selectItems.d.text;
                    var visitDate = y+"-"+m+"-"+d;
                    $("#visitDate").val(visitDate);
                })
            });
        });
    </script>
    <!--分享js-->
    <script type="text/javascript">
        function toshare(){
            $(".am-share").addClass("am-modal-active");
            if($(".sharebg").length>0){
                $(".sharebg").addClass("sharebg-active");
            }else{
                $("body").append('<div class="sharebg"></div>');
                $(".sharebg").addClass("sharebg-active");
            }
            $(".sharebg-active,.share_btn").click(function(){
                $(".am-share").removeClass("am-modal-active");
                setTimeout(function(){
                    $(".sharebg-active").removeClass("sharebg-active");
                    $(".sharebg").remove();
                },300);
            })
        }
    </script>
</body>
</html>
